import { ref, reactive, onMounted,watch} from 'vue'
import regions from "ele-admin-pro/packages/regions";
// import {addrEditService} from "@/components/MAddrEdit/js/addrEditService";
import {message,Modal} from "ant-design-vue";

export  default function AddrMapEdit(props,context){
  // console.log(props);
  //省市区数据
  let cityData = reactive(regions);
  //城市拼接字符串
  let cityStr = ref('');
  //所需字典
  let dict=reactive({dictItem:'地址类别',dictOptions:[]});

  //联系人类型
  let addressType=ref(props.AddressType)

  // let formRef=ref();
  //flag
  let flagCollection=reactive({visibleFlag:false,showPickerFlag:true});
  //定义响应式数据
  let tempAddressEntityData=reactive(props.AddressEntityData);
  // console.log(tempAddressEntityData)
  //地址状态
  let  tempAddressStatus=ref(props.AddressStatus);
  //文本框内容显示详细地址
  let detailedAddress = ref(props.AddressEntityData.detailedAddress);
  //表单数据
  let formData = reactive({addressAbbreviation:'',addressType:props.AddressType,  businessID:null, status:"",city:'',cityValue:[],detailedAddress:'',district:'',addressLatitude:null,addressLongitude:null,province:'',streetAddr:""});
  //地图获取数据
  let locationData = reactive({});
  //监听
  watch(detailedAddress,(newData)=>{
    return newData;
  })
  onMounted(() => {
    // //渲染下拉框
    // addrEditService.queryDictByVuex(dict.dictItem).then((resp)=>{
    //   dict.dictOptions=resp;
    // })
    //一开始判断AddressEntityData对象是否有值
    if(props.AddressEntityData.addressLongitude!=null && props.AddressEntityData.addressLatitude!=null ){
      //TODO 渲染
      //tempAddressEntityData=formData;
      Object.assign(formData,tempAddressEntityData);



      //赋值三级联动框 cityTemp数组
      let cityTemp = [tempAddressEntityData.province, tempAddressEntityData.city, tempAddressEntityData.district];
      formData.cityValue = regions.getValue(cityTemp);
    }

    formData.addressType=addressType.value
  })
  //显示展示框
  let showModal = () => {
    //检测地址是否启用
    if(tempAddressStatus.value=="启用"){
      //启用
      showModalInfo();

    }else{
      //0禁用  可编辑
      flagCollection.visibleFlag= true;
    }
  }
  //fn
  function showModalInfo(){

    Modal.info({
      title:"警告",
      content:`当前地址已经启用，无法编辑修改,请禁用地址后再进行编辑修改`
    })
    // setTimeout(()=>{
    //   //摧毁模态框
    //   modal.destroy();
    // },2000)

  }
  //ok按钮事件
  let okFn = () => {
    // debugger;
    // console.log(formData);
    //判断经度纬度是否为空
    if(formData.addressLatitude==null && formData.addressLongitude==null){
      message.error('请在左边的地图选择正确的地址,点击确定按钮确定地址！！！');
      return;
    }else if(formData.addressType==""){
      message.error('请选择地址类别！！！');
      return;
    }else{
      //TODO
      //赋值给子组件文本框,刷新数据
      detailedAddress.value=formData.detailedAddress;
      //组装name
      formData.name=detailedAddress.value;
      //将表单数据传递给父组件 formData中含有数据库必要字段。
      context.emit('addrChange', formData);

    }
    //定时关闭弹窗
    setTimeout(()=>{
      console.log(addressType);
      flagCollection.visibleFlag= false;
    },1000);

  }
  //取消按钮事件
  let cancelFn = () => {
    flagCollection.visibleFlag= false;
    // return false;
  }
  //地图选点回调事件
  let onChooseFn = (location) => {
    //debugger;
    //formData={};
    //地址数据
    locationData = location;
    // console.log(locationData);
    //TODO 改造 使其能够兼容渲染和读取
    if (locationData != '') {
      if (locationData.city != '') {
        //对象 {province: "重庆", city: "重庆市", citycode: "023", district: "渝中区"}
        let cityData = locationData.city;

        if (cityData.province == "重庆市" || cityData.province == "北京市" || cityData.province == "上海市" || cityData.province == "天津市") {
          cityData.city = cityData.province;
          cityData.province = cityData.province.substring(0, 2);
        }
        //地址简称
        formData.addressAbbreviation = locationData.name;
        //街道名称
        formData.streetAddress = locationData.address;
        //赋值三级联动框 cityTemp数组
        let cityTemp = [cityData.province, cityData.city, cityData.district];
        //字符串 cityStr  重庆重庆市沙坪坝区
        cityStr.value = cityTemp.join('');
        //["500000", "500100", "500103"]
        formData.cityValue = regions.getValue(cityTemp);
        //拆分省市区分别为字符串(名称)
        formData.province = cityTemp[0];
        formData.city = cityTemp[1];
        formData.district = cityTemp[2];
        //详细地址
        formData.detailedAddress = cityStr.value + formData.streetAddress;
        //经纬度
        formData.addressLongitude = locationData.lng;
        formData.addressLatitude = locationData.lat;
      }
    }


  }
  return {
    cityData,
    cityStr,
    dict,
    flagCollection,
    tempAddressEntityData,
    tempAddressStatus,
    detailedAddress,
    formData,
    locationData,
    labelCol: {span: 5},
    wrapperCol: {span: 19},
    showModal,
    okFn,
    cancelFn,
    onChooseFn,
  }
}
